import { Button, Space, Table, Tag } from 'antd'
import { useEffect, useState } from 'react'
import TitleSearch from '../../components/TitleSearch'
import { DeleteOutlined } from '@ant-design/icons';

import api from '../../api'


const columns = [
    {
        title: '用户编号',
        dataIndex: '_id',
        align: 'center',
    },
    {
        title: '姓名',
        dataIndex: 'nickName',
        align: 'center',
    },
    {
        title: '性别',
        dataIndex: 'gender',
        align: 'center',
        render: (text) => (text == '1' ? <Tag color="#2db7f5">男</Tag> : <Tag color="#f50">女</Tag> )
    },
    {
        title: '操作',
        align: 'center',
        render: () => (
            <Space>
                <Button type="primary" icon={<DeleteOutlined />} danger>删除</Button>
            </Space>
        )
    }
]

const UserPage = () => {
    const [data, setData] = useState([])


    useEffect(() => {
        getData()
    }, [])
    const getData = async () => {
        const res = await api.member.getAllMembers()
        if (res.meta.status) {
            setData(res.data)
        }
    }

    return (
        <div>
            <TitleSearch title='用户管理' />
            <Table
                bordered
                dataSource={data}
                columns={columns}
                rowKey='_id'
            />
        </div>
    )
}

export default UserPage